
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>教程 - UIkit 中文文档</title>
        <meta name="description" content="UIKit的视频教程，介绍如何使用 UIkit 进行web前端界面的开发。">
        <meta name="author" content="UIkit中文网">
         
<meta name="keywords" content="UIKit视频教程,UIkit教程,UIkit怎么用">
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
    <link id="data-uikit-theme" rel="stylesheet" href="css/uikit.docs.min.css">
    <link rel="stylesheet" href="css/docs.css">
    <link rel="stylesheet" href="../vendor/highlight/highlight.css">
    <script src="../vendor/jquery.js"></script>
    <script src="js/uikit.min.js"></script>
    <script src="../vendor/highlight/highlight.js"></script>
    <script src="js/docs.js"></script>
    <script src="../src/js/components/sticky.js"></script>
</head>

<body class="tm-background">

<nav class="tm-navbar uk-navbar uk-navbar-attached">
    <div class="uk-container uk-container-center">

        <a class="uk-navbar-brand uk-hidden-small" href="../index.html"><img class="uk-margin uk-margin-remove" src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>

        <ul class="uk-navbar-nav uk-hidden-small">
                    <li><a href="documentation_get-started.html">开始使用</a></li>
                    <li><a href="core.html">核心组件</a></li>
                    <li><a href="components.html">附加组件</a></li>
                    <li><a href="customizer.html">定制工具</a></li>
                    <li><a href="../showcase/index.html">案例展示</a></li>
                    <li class="uk-active"><a href="tutorials.html">视频教程</a></li>
        </ul>

        <a href="#tm-offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>

        <div class="uk-navbar-brand uk-navbar-center uk-visible-small"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></div>

    </div>
</nav>

<div class="tm-middle">
    <div class="uk-container uk-container-center">

        <div class="uk-grid" data-uk-grid-margin>
            <div class="tm-sidebar uk-width-medium-1-4 uk-hidden-small">

                <div class="" data-uk-sticky="{top: 50}">
                   <ul class="uk-nav tm-nav" data-uk-nav data-uk-scrollspy-nav="{closest: 'li', smoothscroll: true}">
                       <li class="uk-nav-header">教程导航</li>
                       <li><a href="#overview-introduction">介绍</a></li>
                       <li><a href="#getting-started">基础标签</a></li>
                       <li><a href="#responsive-grid">响应式网格</a></li>
                       <li><a href="#one-pager">构建单页</a></li>
                       <li><a href="#sticky-navigation">跟随滚动的导航栏</a></li>
                       <li><a href="#scrollspy-navigation">滚动监听和平滑滚动</a></li>
                       <li><a href="#off-canvas-mobile-navigations">抽屉式导航</a></li>
                       <li><a href="#autocompletion-sublime-text">Sublime中的自动完成</a></li>
                       <li><a href="#parallax-scrolling">视差滚动</a></li>
                       <li><a href="#using-customizer">使用定制工具</a></li>
                   </ul>
                </div>

            </div>

            <div class="tm-main uk-width-medium-3-4">

                <div class="uk-article">
                    <h1>教程</h1>
                    <p class="uk-article-lead">由 UIkit 社区制作的一系列 UIkit 视频教程。如果你在网上找到了更多的教程，那太好了，请 <a href="mailto:info@getuikit.com">通知我们</a>！</p>
                </div>

                <article class="uk-article">
                    <h1 class="uk-article-title uk-float-left" id="overview-introduction">概述和介绍 </h1>
                    <p><a href="http://www.bilibili.com/video/av2838075/">前往哔哩哔哩观看</a></p>
                    <p class="uk-text-muted uk-float-right">March, 2015</p>
                    <iframe class="uk-responsive-width" width="1280" height="720" src="https://www.youtube.com/embed/JxplDTY65oY?rel=0&amp;modestbranding=1&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>
                </article>

                <article class="uk-article">
                    <h1 class="uk-article-title uk-float-left" id="getting-started">开始使用和基础标记 </h1>
                    <p><a href="http://www.bilibili.com/video/av2838075/index_2.html">前往哔哩哔哩观看</a></p>
                    <p class="uk-text-muted uk-float-right">March, 2015</p>
                    <iframe class="uk-responsive-width" width="1280" height="720" src="https://www.youtube.com/embed/_k60JPkunbI?rel=0&amp;modestbranding=1&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>
                </article>

                <article class="uk-article">
                    <h1 class="uk-article-title uk-float-left" id="responsive-grid">响应式网格</h1>
                    <p><a href="http://www.bilibili.com/video/av2838075/index_3.html">前往哔哩哔哩观看</a></p>
                    <p class="uk-text-muted uk-float-right">March, 2015</p>
                    <iframe class="uk-responsive-width" width="1280" height="720" src="https://www.youtube.com/embed/xtKFizuxBTo?rel=0&amp;modestbranding=1&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>
                </article>

                <article class="uk-article">
                    <h1 class="uk-article-title uk-float-left" id="one-pager">构建单页</h1>
                    <p><a href="http://www.bilibili.com/video/av2838075/index_4.html">前往哔哩哔哩观看</a></p>
                    <p class="uk-text-muted uk-float-right">March, 2015</p>
                    <iframe class="uk-responsive-width" width="1280" height="720" src="https://www.youtube.com/embed/AY1_hiboFg0?rel=0&amp;modestbranding=1&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>
                </article>

                <article class="uk-article">
                    <h1 class="uk-article-title uk-float-left" id="sticky-navigation">跟随滚动的导航</h1>
                    <p><a href="http://www.bilibili.com/video/av2838075/index_5.html">前往哔哩哔哩观看</a></p>
                    <p class="uk-text-muted uk-float-right">March, 2015</p>
                    <iframe class="uk-responsive-width" width="1280" height="720" src="https://www.youtube.com/embed/YD49gJxEd4U?rel=0&amp;modestbranding=1&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>
                </article>

                <article class="uk-article">
                    <h1 class="uk-article-title uk-float-left" id="scrollspy-navigation">滚动监听导航和平滑滚动</h1>
                    <p><a href="http://www.bilibili.com/video/av2838075/index_6.html">前往哔哩哔哩观看</a></p>
                    <p class="uk-text-muted uk-float-right">March, 2015</p>
                    <iframe class="uk-responsive-width" width="1280" height="720" src="https://www.youtube.com/embed/t8Te3T8Y6EQ?rel=0&amp;modestbranding=1&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>
                </article>

                <article class="uk-article">
                    <h1 class="uk-article-title uk-float-left" id="off-canvas-mobile-navigations">抽屉式导航 </h1>
                    <p><a href="http://www.bilibili.com/video/av2838075/index_7.html">前往哔哩哔哩观看</a></p>
                    <p class="uk-text-muted uk-float-right">March, 2015</p>
                    <iframe class="uk-responsive-width" width="1280" height="720" src="https://www.youtube.com/embed/MfdMfobt3l4?rel=0&amp;modestbranding=1&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>
                </article>

                <article class="uk-article">
                    <h1 class="uk-article-title uk-float-left" id="autocompletion-sublime-text">Sublime Text 3 中的自动完成</h1>
                    <p><a href="http://www.bilibili.com/video/av2838075/index_8.html">前往哔哩哔哩观看</a></p>
                    <p class="uk-text-muted uk-float-right">April, 2015</p>
                    <iframe class="uk-responsive-width" width="1280" height="720" src="https://www.youtube.com/embed/1ZgXK-ABnIs?rel=0&amp;modestbranding=1&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>
                </article>

                <article class="uk-article">
                    <h1 class="uk-article-title uk-float-left" id="parallax-scrolling">视差滚动</h1>
                    <p><a href="http://www.bilibili.com/video/av2838075/index_9.html">前往哔哩哔哩观看</a></p>
                    <p class="uk-text-muted uk-float-right">May, 2015</p>
                    <iframe class="uk-responsive-width" width="1280" height="720" src="https://www.youtube.com/embed/tkxOvALoWl8?rel=0&amp;modestbranding=1&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>
                </article>

                <article class="uk-article">
                    <h1 class="uk-article-title uk-float-left" id="using-customizer">使用定制工具 </h1>
                    <p><a href="http://www.bilibili.com/video/av2838075/index_10.html">前往哔哩哔哩观看</a></p>
                    <p class="uk-text-muted uk-float-right">May, 2015</p>
                    <iframe class="uk-responsive-width" width="1280" height="720" src="https://www.youtube.com/embed/rJieiAxYtLI?rel=0&amp;modestbranding=1&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>
                </article>

            </div>
        </div>

    </div>

</div>

<div class="tm-footer">
    <div class="uk-container uk-container-center uk-text-center">

        <ul class="uk-subnav uk-subnav-line uk-flex-center">
            <li><a href="http://github.com/uikit/uikit">GitHub</a></li>
            <li><a href="http://github.com/uikit/uikit/issues">Issues</a></li>
            <li><a href="http://github.com/uikit/uikit/blob/master/CHANGELOG.md">Changelog</a></li>
            <li><a href="https://twitter.com/getuikit">Twitter</a></li>
        </ul>

        <div class="uk-panel">
            <p>Made by <a href="http://www.yootheme.com">YOOtheme</a> with love and caffeine.<br>Licensed under <a href="http://opensource.org/licenses/MIT">MIT license</a>.</p>
            <a href="../index.html"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>
        </div>

    </div>
</div>

<div id="tm-offcanvas" class="uk-offcanvas">

    <div class="uk-offcanvas-bar">

        <ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav="{multiple:true}">
                    <li class="uk-parent"><a href="#">UIkit 中文文档</a>
                        <ul class="uk-nav-sub">
                            <li><a href="documentation_get-started.html">开始使用</a></li>
                            <li><a href="documentation_how-to-customize.html">如何定制</a></li>
                            <li><a href="documentation_layouts.html">布局示例</a></li>
                            <li><a href="core.html">核心组件</a></li>
                            <li><a href="components.html">附加组件</a></li>
                            <li><a href="documentation_project-structure.html">项目结构</a></li>
                            <li><a href="documentation_less-sass.html">Less &amp; Sass 文件</a></li>
                            <li><a href="documentation_create-a-theme.html">创建主题</a></li>
                            <li><a href="documentation_create-a-style.html">创建样式</a></li>
                            <li><a href="documentation_customizer-json.html">Customizer.json</a></li>
                            <li><a href="documentation_javascript.html">JavaScript</a></li>
                            <li><a href="documentation_custom-prefix.html">自定义前缀</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">Core</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-wrench"></i> 默认</a>
                        <ul class="uk-nav-sub">
                            <li><a href="base.html">基础</a></li>
                            <li><a href="print.html">打印</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> 布局类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid.html">网格</a></li>
                            <li><a href="panel.html">面板</a></li>
                            <li><a href="block.html">块</a></li>
                            <li><a href="article.html">文章</a></li>
                            <li><a href="comment.html">评论</a></li>
                            <li><a href="utility.html">效果</a></li>
                            <li><a href="flex.html">Flex</a></li>
                            <li><a href="cover.html">覆盖</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> 导航类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="nav.html">导航菜单</a></li>
                            <li><a href="navbar.html">导航栏</a></li>
                            <li><a href="subnav.html">二级导航</a></li>
                            <li><a href="breadcrumb.html">面包屑</a></li>
                            <li><a href="pagination.html">分页</a></li>
                            <li><a href="tab.html">选项卡</a></li>
                            <li><a href="thumbnav.html">缩略图导航</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-check"></i> 页面元素</a>
                        <ul class="uk-nav-sub">
                            <li><a href="list.html">列表</a></li>
                            <li><a href="description-list.html">描述列表</a></li>
                            <li><a href="table.html">表格</a></li>
                            <li><a href="form.html">表单</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> 常用组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="button.html">按钮</a></li>
                            <li><a href="icon.html">图标</a></li>
                            <li><a href="close.html">关闭</a></li>
                            <li><a href="badge.html">徽章</a></li>
                            <li><a href="alert.html">提示框</a></li>
                            <li><a href="thumbnail.html">缩略图</a></li>
                            <li><a href="overlay.html">遮罩</a></li>
                            <li><a href="text.html">文本</a></li>
                            <li><a href="column.html">列</a></li>
                            <li><a href="animation.html">动画</a></li>
                            <li><a href="contrast.html">对比度</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dropdown.html">下拉菜单</a></li>
                            <li><a href="modal.html">模态对话框</a></li>
                            <li><a href="offcanvas.html">抽屉</a></li>
                            <li><a href="switcher.html">切换器</a></li>
                            <li><a href="toggle.html">拨动</a></li>
                            <li><a href="scrollspy.html">滚动监听</a></li>
                            <li><a href="smooth-scroll.html">平滑滚动</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">附加组件</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> 布局类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid-js.html">动态网格</a></li>
                            <li><a href="grid-parallax.html">视差网格</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> 导航类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dotnav.html">圆点导航</a></li>
                            <li><a href="slidenav.html">滑动导航</a></li>
                            <li><a href="pagination-js.html">动态分页</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> 常用组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="form-advanced.html">高级表单</a></li>
                            <li><a href="form-file.html">文件表单</a></li>
                            <li><a href="form-password.html">密码表单</a></li>
                            <li><a href="form-select.html">选择表单</a></li>
                            <li><a href="placeholder.html">占位符</a></li>
                            <li><a href="progress.html">进度条</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="lightbox.html">灯箱</a></li>
                            <li><a href="autocomplete.html">自动完成</a></li>
                            <li><a href="datepicker.html">日期选择器</a></li>
                            <li><a href="htmleditor.html">HTML 编辑器</a></li>
                            <li><a href="slider.html">滚动条</a></li>
                            <li><a href="slideset.html">滑块集</a></li>
                            <li><a href="slideshow.html">幻灯片</a></li>
                            <li><a href="parallax.html">视差</a></li>
                            <li><a href="accordion.html">手风琴</a></li>
                            <li><a href="notify.html">通知</a></li>
                            <li><a href="search.html">搜索</a></li>
                            <li><a href="nestable.html">可嵌套</a></li>
                            <li><a href="sortable.html">可排序</a></li>
                            <li><a href="sticky.html">附着</a></li>
                            <li><a href="timepicker.html">时间选择器</a></li>
                            <li><a href="tooltip.html">工具提示</a></li>
                            <li><a href="upload.html">上传</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-divider"></li>
                    <li><a href="../showcase/index.html">案例展示</a></li>
                    <li><a href="tutorials.html">视频教程</a></li>
                </ul>

    </div>

</div>

</body>
</html>
